<template>
	<view class="all">
		<TotleVue title="支付"></TotleVue>
		<view class="boxGoods">
			<img :src="goodsBox.img" alt="" />
			<view class="">
				<p style="font-size: 40rpx;width: 90%;margin: 1rem auto;">{{goodsBox.name}}</p>
				<p class="topType">
					<span>{{goodsBox.is_out}}</span>
					<span>|</span>
					<span>{{goodsBox.reservation}}</span>
					<span>|</span>
					<span>{{goodsBox.refund}}</span>
					<span>|</span>
					<span>{{goodsBox.statking}}</span>
				</p>
				<p style="margin-top: 1rem;">
					<span style="font-size: 45rpx;color: orangered;margin-right: 20rpx;">￥{{goodsBox.price*goodsBox.detailts}}</span>
					<span><s>{{goodsBox.price}}</s></span>
				</p>
				<p class="boxBtn">
					<button :disabled="goodsBox.num<=1 ? 'true':'false'">-</button>
					{{goodsBox.num}}
					<button>+</button>
				</p>
			</view>
		</view>
		<view style="width: 90%;height: 0.2rem; background-color: #4a4a4a;margin: 1.5rem auto;"></view>

		<ul class="priceText">
			<li><span>小计</span><span>￥{{goodsBox.price*goodsBox.num}}</span></li>
			<li><span>使用金额</span><span>￥{{goodsBox.price*goodsBox.num}}</span></li>
			<li><span>手机号</span><span>￥{{tel}}</span></li>
		</ul>

		<button class="priceTextOk">￥{{goodsBox.price*goodsBox.num}}确认下单</button>
	</view>
</template>

<script setup>
	import TotleVue from "../../../Totle.vue";
	import {
		ref,
		onMounted
	} from "vue";
	import {
		get_goods_box
	} from "../../../../../../project_video/api/api";
	const props = defineProps({});

	//商品信息
	const goodsBox = ref({});
	const tel=ref("");
	//获取商品信息
	const getGoodsBox = async () => {
		let res = await get_goods_box({
			id: props.id
		});
		goodsBox.value = res.data[0];
		tel.value=res.tel.slice(0,3)+"****"+res.tel.slice(-4);
	};
	onMounted(() => {
		getGoodsBox();
	});
</script>

<style lang="scss" scoped>
	.all {
		width: 100vw;
		height: 100vh;
		background-color: #191919;
		color: white;
	}

	.boxGoods {
		width: 90%;
		margin: 0 auto;
		display: flex;
		// align-items: center;
		padding: 0.5rem;

		img {
			width: 5.8rem;
			height: 5.8rem;
			margin: 0.5rem;
		}
	}

	.topType {
		width: 100%;
		margin: auto;

		span {
			font-size: 20rpx;
			margin: 0 0.2rem;
		}
	}

	.boxBtn {
		display: flex;
		margin-top: 0.5rem;
		justify-content: space-around;

		button {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: white;
			color: black;
			font-size: 40rpx;
		}
	}
	.priceText{
		li{
			list-style: none;
			display: flex;
			width: 90%;
			margin: 0.5rem auto;
			justify-content: space-between;
			font-size: 30rpx;
		}
		li:nth-child(2){
			span:nth-child(2){
				color: orangered;
			}
		}
	}

	.priceTextOk{
		width: 80%;
		padding: 0.2rem;
		background-color: #f7d80a;
		color: black;
		font-size: 30rpx;
		margin: 3rem auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

</style>